<!--
* @Name: ElTableIndex
* @Description: element-plus 的 el-table
* @Author: 三咲问道
* @Date: 2024-01-06
-->
<template>
  <div class="ElTableIndex">
    <TableComponent :data="tableData" :columnList="columnList"
                    @current-change="currentChange" @size-change="sizeChange" @header-contextmenu="headerContextmenu">
      <template #slotNameTest="scope">
        <div>{{ `${scope.scope.row.l8} 插槽测试` }}</div>
      </template>

      <template #operate="scope">
        <div class="operate-content">
          <div class="o-1" @click="operateHandle(1,scope)">新增</div>
          <div class="o-2" @click="operateHandle(1,scope)">删除</div>
          <div class="o-3" @click="operateHandle(1,scope)">修改</div>
          <div class="o-4" @click="operateHandle(1,scope)">查询</div>
        </div>
      </template>

    </TableComponent>
  </div>

  <div class=""></div>
</template>

<script lang="ts" setup>
import TableComponent from "@/common/components/TableComponent.vue";

const columnList = [
  {
    columnKey: 'l1',
    columnName: '列表1',
    width: '200',
    isEvent: true,
    overflow: false,
    align: 'center'
  },
  {
    columnKey: 'l2',
    columnName: '列表2',
    // isEvent: true,
    overflow: true,
    align: 'center'
  },
  {
    columnKey: 'l8',
    columnName: '列表特殊展示',
    isSlot: true,
    align: 'center',
    slotName: 'slotNameTest'
  },
  {
    columnKey: 'l3',
    columnName: '列表3',
    // isEvent: true,
    overflow: false,
    // align: 'center'
  },
  {
    columnKey: 'l4',
    columnName: '列表4',
    // isEvent: true,
    overflow: false,
    align: 'center'
  },
  {
    columnKey: 'l5',
    columnName: '列表5',
    // isEvent: true,
    overflow: false,
    align: 'center'
  },
  {
    columnKey: 'l6',
    columnName: '列表6',
    // isEvent: true,
    overflow: false,
    align: 'center'
  },
  {
    columnKey: 'l7',
    columnName: '操作',
    // isEvent: true,
    overflow: false,
    align: 'center',
    isSlot: true,
    slotName: 'operate'
  },
]

const tableData = [
  {
    l1: '列表1',
    l2: '列表2列表2列表2列表2列表2列表2列表2列表2列表2列表2列表2列表2列表2列表2列表2列表2列表2列表2列表2列表2列表2列表2',
    l3: '列表3',
    l4: '列表4',
    l5: '列表5',
    l6: '列表6',
    l7: '操作1',
    l8: '显示插槽1'
  },
  {
    l1: '列表12',
    l2: '列表22列表22列表22列表22列表22列表22列表22列表22列表22列表22列表22列表22列表22列表22列表22列表22列表22列表22列表22',
    l3: '列表32',
    l4: '列表42',
    l5: '列表52',
    l6: '列表62',
    l7: '操作2',
    l8: '显示插槽2'
  },
  {
    l1: '列表13',
    l2: '列表23列表23列表23列表23列表23列表23列表23列表23列表23列表23列表23列表23列表23列表23列表23列表23列表23列表23列表23列表23列表23列表23',
    l3: '列表33',
    l4: '列表43',
    l5: '列表53',
    l6: '列表63',
    l7: '操作3',
    l8: '显示插槽3'
  },
]

const operateHandle = (type, scope) => {
  console.log('type: ', type)
  console.log('scope: ', scope.scope)
}

const headerContextmenu = (column, event) => {
  console.log(column)
  console.log(event)
}

const currentChange = (e) => {
  console.log(e)
}

const sizeChange = (e) => {
  console.log(e)
}


</script>

<style lang="less" scoped>
.ElTableIndex {
  .operate-content {
    display: flex;
    justify-content: space-between;
  }

  .o-1 {
    color: #409eff;
    cursor: pointer;
  }

  .o-2 {
    color: #f56c6c;
    cursor: pointer;
  }

  .o-3 {
    color: #529b2e;
    cursor: pointer;
  }

  .o-4 {
    color: #c8c9cc;
    cursor: not-allowed;
  }

}
</style>